<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./gard-layout.css">
    <style>
        .layui-field-title{margin-top: 30px;}
        .grid-demo{padding: 10px; line-height: 50px; text-align: center; background-color: #79C48C; color: #fff;}
        .grid-demo-bg1{background-color: #63BA79;}
        .grid-demo-bg2{background-color: #49A761;}
        .grid-demo-bg3{background-color: #38814A;}
    </style>
</head>
<body>

<div class="xz-ui-container">
    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>始终等比例水平排列</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-xs6">
            <div class="grid-demo grid-demo-bg1">50%</div>
        </div>
        <div class="xz-ui-col-xs6">
            <div class="grid-demo">50%</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row">
        <div class="xz-ui-col-xs3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="xz-ui-col-xs3">
            <div class="grid-demo">25%</div>
        </div>
        <div class="xz-ui-col-xs3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="xz-ui-col-xs3">
            <div class="grid-demo">25%</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>移动设备、桌面端的不同展现</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-xs12 xz-ui-col-md8">
            <div class="grid-demo grid-demo-bg1">移动设备：100%、桌面：60%</div>
        </div>
        <div class="xz-ui-col-xs6 xz-ui-col-md4">
            <div class="grid-demo">移动设备：50%、桌面：40%</div>
        </div>
        <div class="xz-ui-col-xs6 xz-ui-col-md12">
            <div class="grid-demo grid-demo-bg2">移动设备：50%、桌面：100%</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>移动设备、平板、桌面端的不同展现</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-xs6 xz-ui-col-sm6 xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">50% | 33.33% | 33.33%</div>
        </div>
        <div class="xz-ui-col-xs6 xz-ui-col-sm6 xz-ui-col-md4">
            <div class="grid-demo xz-ui-bg-red">50% | 66.67% | 33.33%</div>
        </div>
        <div class="xz-ui-col-xs4 xz-ui-col-sm12 xz-ui-col-md4">
            <div class="grid-demo xz-ui-bg-blue">33.33% | 100% | 33.33%</div>
        </div>
        <div class="xz-ui-col-xs4 xz-ui-col-sm7 xz-ui-col-md8">
            <div class="grid-demo xz-ui-bg-green">33.33% | 50% | 66.67%</div>
        </div>
        <div class="xz-ui-col-xs4 xz-ui-col-sm5 xz-ui-col-md4">
            <div class="grid-demo xz-ui-bg-black">33.33% | 50% | 33.33%</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>从小屏幕堆叠到桌面水平排列</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md9">
            <div class="grid-demo grid-demo-bg1">75%</div>
        </div>
        <div class="xz-ui-col-md3">
            <div class="grid-demo">25%</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo">33.33%</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md6">
            <div class="grid-demo grid-demo-bg1">50%</div>
        </div>
        <div class="xz-ui-col-md6">
            <div class="grid-demo">50%</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>分栏间隔</legend>
    </fieldset>

    <div class="xz-ui-row xz-ui-col-space1">
        <div class="xz-ui-col-md3">
            <div class="grid-demo grid-demo-bg1">1/4</div>
        </div>
        <div class="xz-ui-col-md3">
            <div class="grid-demo">1/4</div>
        </div>
        <div class="xz-ui-col-md3">
            <div class="grid-demo grid-demo-bg1">1/4</div>
        </div>
        <div class="xz-ui-col-md3">
            <div class="grid-demo">1/4</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row xz-ui-col-space5">
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">1/3</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo">1/3</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">1/3</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row xz-ui-col-space10">
        <div class="xz-ui-col-md9">
            <div class="grid-demo grid-demo-bg1">75%</div>
        </div>
        <div class="xz-ui-col-md3">
            <div class="grid-demo">25%</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row xz-ui-col-space15">
        <div class="xz-ui-col-md7">
            <div class="grid-demo grid-demo-bg1">58.33%</div>
        </div>
        <div class="xz-ui-col-md5">
            <div class="grid-demo">41.67%</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row xz-ui-col-space20">
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo">33.33%</div>
        </div>
        <div class="xz-ui-col-md4">
            <div class="grid-demo">33.33%</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>列偏移</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
        <div class="xz-ui-col-md4 xz-ui-col-md-offset4">
            <div class="grid-demo">偏移4列</div>
        </div>
        <div class="xz-ui-col-md1 xz-ui-col-md-offset5">
            <div class="grid-demo grid-demo-bg1">偏移5列</div>
        </div>
        <div class="xz-ui-col-md1">
            <div class="grid-demo">不偏移</div>
        </div>
    </div>

    <br>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md3 xz-ui-col-md-offset3">
            <div class="grid-demo grid-demo-bg1">偏移3列</div>
        </div>
        <div class="xz-ui-col-md3 xz-ui-col-md-offset1">
            <div class="grid-demo">偏移1列</div>
        </div>
    </div>

    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>嵌套</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-md5">
            <div class="xz-ui-row grid-demo">
                <div class="xz-ui-col-md3">
                    <div class="grid-demo grid-demo-bg1">内部列</div>
                </div>
                <div class="xz-ui-col-md9">
                    <div class="grid-demo grid-demo-bg2">内部列</div>
                </div>
                <div class="xz-ui-col-md12">
                    <div class="grid-demo grid-demo-bg3">内部列</div>
                </div>
            </div>
        </div>
        <div class="xz-ui-col-md7">
            <div class="xz-ui-row grid-demo grid-demo-bg1">
                <div class="xz-ui-col-md12">
                    <div class="grid-demo">内部列</div>
                </div>
                <div class="xz-ui-col-md9">
                    <div class="grid-demo grid-demo-bg2">内部列</div>
                </div>
                <div class="xz-ui-col-md3">
                    <div class="grid-demo grid-demo-bg3">内部列</div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="xz-ui-fluid">
    <fieldset class="xz-ui-elem-field xz-ui-field-title">
        <legend>流体容器（宽度自适应，不固定）</legend>
    </fieldset>

    <div class="xz-ui-row">
        <div class="xz-ui-col-sm3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="xz-ui-col-sm3">
            <div class="grid-demo">25%</div>
        </div>
        <div class="xz-ui-col-sm3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="xz-ui-col-sm3">
            <div class="grid-demo">25%</div>
        </div>
    </div>
</div>

<br><br>


</body>
</html>